import React, {Component} from 'react'
import LazyLoad from 'react-lazyload';
import PlaceholderComponent from '../../Placeholder'
import Carousel  from 'antd-mobile/lib/carousel'

class Index extends Component {
    render() {
        return(
            <div className="carousel-con">
                <Carousel
                    selectedIndex={0}
                    autoplay
                    dotStyle={{background:'white',border:'1px solid #666'}}
                    dotActiveStyle={{background:'#f4d739',border:'none'}}
                    className='carousel-list'>
                    {this.props.image_list.map((item,i) => (
                        <LazyLoad key={item} offset={[-200, 0]} placeholder={<PlaceholderComponent />} >
                            <img key={item+i} src={item} alt="carousel" />
                        </LazyLoad>
                    ))}
                </Carousel>
            </div>
        )
    }
}


export default Index
